<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#hide").click(function(){
					$("#ad1").hide(4000);
				});
				$("#show").click(function(){
					$("#ad1").show(4000);
				});
				$("#fadeIn").click(function(){
					$("#ad1").fadeIn(4000);
				});
				$("#fadeOut").click(function(){
					$("#ad1").fadeOut(4000);
				});
				$("#down").click(function(){
					$("#ad1").slideDown(4000);
				});
				$("#up").click(function(){
					$("#ad1").slideUp(4000);
				});
				$("#dingzhi").click(function(){
					// $("#ad1").animate({
					// 	height:0,
					// 	width:0,
					// 	display:"none"
					// },4000,function(){
					// 	$(this).hide();
					// });
					var w=$("#ad1").width();
					
					let timer=window.setInterval(function(){
						w-=10;
						console.log("width:"+w);
						if(w<0){
							window.clearInterval(timer);
							//$("#ad1").hide();
							return;
						}
						$("#ad1").animate({ 
							width:w
						},10);
					},10);
					
				});
			});
		</script>
	</head>
	<body>
		<div id="ad1">
			<img src="../day8/images/2.jpg"/>
		</div>
		<p>
			<button type="button" id="hide">隐藏</button>
			<button type="button" id="show">显示</button>
			<button type="button" id="fadeIn">淡入</button>
			<button type="button" id="fadeOut">淡出</button>
			<button type="button" id="down">down</button>
			<button type="button" id="up">up</button>
			<button type="button" id="dingzhi">定制</button>
		</p>
	</body>
</html>
